前情提要

上回學習遠距離火屬性初階魔法。

「呼，總算學完了，我來試試發射看吧！」

艾草：「欸欸，你不要都往我身上丟啊啊啊，雖然這火很弱，但不要亂來啊啊！」

「啊我就剛學會，不太會操控呀！」

艾草：「不太會操控，但都往我附近丟是怎樣，根本是挾怨報復！我要投訴動保了喔(艾草設定是鳥)！」

「=x=...」

艾草：「哼，算了看我的追擊箭！」

(艾草身上射出了一道透明光箭，砸中我後沒感覺到疼痛，但全身被束縛住了。)

「放開我....」

艾草：「嘿嘿，求我呀！這可是我新研發的箭頭魔法，我來教你原理，你自己試著解開吧！」

箭頭函式

複習一下函式有兩種寫法分別為：函式陳述式、函式表達式。

函式陳述式

函式陳述式的組成結構：

1. 函式的名稱（可自定義）
2. 小括號 () 用來放置參數，可用,逗號分隔每個參數
3. 大括號 {} 內部可以放想執行的 JavaScript 程式碼

function test() {
  console.log("Hello World!"); //Hello World!
}
test();

函式表達式

函式表達式寫法：先宣告一個變數後，在將一個函式賦予給該變數，而函式表達式的呼叫方式是變數名稱加上()小括號。

let add = function (num1, num2) {
  return num1 + num2;
};
let num = add(1, 2);
console.log(num)//3

而函式表達式可以改寫為箭頭函式的形式，將 function 省略掉並在後方補上箭頭 => ：

let add = (num1, num2) => {
  return num1 + num2;
};
let num = add(1, 2);
console.log(num)//3

程式碼僅一行的情況下可以去掉大括號 {} 區塊、return 、分號，將其縮減成一行：

let add = (num1, num2) => num1 + num2;
let num = add(1, 2);
console.log(num); //3

但要注意如果使用大括號 {} 區塊就不能省略 return ：

let add = (num1, num2) => {
  num1 + num2;
};
let num = add(1, 2);
console.log(num);//undefined

如果參數只帶一個的情況下，連小括號 () 都可以省略：

let sayHello = word => `Hello ${word}`;
console.log(sayHello("world"));//Hello world

只有一個參數的情況下才可以省略小括號，沒有參數或參數有兩個以上時，都一定要於參數外包覆小括號！

陣列方法改寫

之前有提到陣列方法內會帶入參數為函式，該函式也能改寫成箭頭函式，以 filter 為例：

原本寫法

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArray = arr.filter(function (item) {
  return item > 5;
});

箭頭函式寫法

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let newArray = arr.filter((item) => item > 5);

監聽函式改寫

原本寫法

const button = document.querySelector("button");
button.addEventListener("click", function (e) {
  console.log("button click");
});

箭頭函式寫法

const button = document.querySelector("button");
button.addEventListener("click", (e) => {
  console.log("button click");
});

總結

• 函式表達式可以改寫為箭頭函式
• 箭頭函式程式碼一行的情況下，可省略大括號 {} 區塊、 return ，縮減成一行
• 箭頭函式參數一個的情況下，可省略參數外小括號
• 陣列方法內的函式、監聽函式也可改寫成箭頭函式寫法

小練習

請問以下何種寫法會報錯？

//A
let arr = [1, 2, 3];
let newArray = arr.map((item) => item + 5);

//B
let test => "Hello World";

//C
let minus = (num1, num2) => {
  return num1 - num2;
};

//D
let data = [1, 2, 3];
let filterArray = data.filter(item => item == 3);

解答： B 會報錯，應該改寫為 let test = () => "Hello World";

參考文獻

JavaScript 必修篇 - 前端修練全攻略（六角學院）
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Functions/Arrow_functions